<template>
  <div class="login" :style="{backgroundImage:info&&info.homeBackground?'url('+info.homeBackground+')':''}">
    <div  class="login-form">
      <h3 class="title">{{info.title}}</h3>
    <el-tabs v-model="activeName">
      <el-tab-pane label="账号密码登录" name="first">
        <login-by-username></login-by-username>
      </el-tab-pane>
      <el-tab-pane label="手机验证码登录" name="second">
        <login-by-phone></login-by-phone>
      </el-tab-pane>
    </el-tabs>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <span v-html="info.desc"></span>
    </div>
  </div>
</template>
<script>
  import LoginByUsername from './LoginByUsername'
  import LoginByPhone from './LoginByPhone'
  import store from '../../store'
  import theme from '@/utils/theme.js'
  export default {
    name:"",
    components: { LoginByPhone, LoginByUsername },
    data(){
      return {
        activeName:"first",
        info:{}
      }
    },
    created() {
      this.getSiteInfo()
    },
    methods:{
      getSiteInfo() {
        store.dispatch('baseSettings/getSiteInfo').then(res=>{
          this.info = res
          theme.renderingTheme(this.info.theme)
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-size: cover;
  }
  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;
    margin-left: 50%;
  }
  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .title {
    margin: 0px auto 10px auto;
    text-align: center;
    color: #707070;
  }
</style>
